<template>
    <view class="selectGoods">
        <uni-nav-bar fixed left-icon="left" title="确认报价" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <!-- <text class="sub-btn" @click="addOrder">新增商机</text> -->
            </block>
        </uni-nav-bar>
        <view class="customer-info">
            <view>
                <view class="num">10条</view>
                <view class="name">商品数量</view>
            </view>
            <view>
                <view class="num">100个</view>
                <view class="name">商品总数量</view>
            </view>
            <view>
                <view class="num">¥10,000,00</view>
                <view class="name">商品总金额</view>
            </view>
        </view>
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="selectHandle(item)">
                <view class="title">{{ item.name }}</view>
                <view class="sn">产品规格：15瓶</view>
                <view class="price">
                    <view class="money">¥100</view>
                    <view>
                        <u-number-box v-model="value">
                            <view slot="minus" class="minus">
                                <u-icon name="minus" size="12"></u-icon>
                            </view>
                            <text slot="input" style="width: 50px;text-align: center;" class="input">{{ value }}</text>
                            <view slot="plus" class="plus">
                                <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                            </view>
                        </u-number-box>
                    </view>
                </view>
                <view class="total">总价(元)：15000</view>
                <view class="icon-box">
                    <image :src="getIcon(item)" style="width: 28px; height: 22px;"></image>
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="bottom-box">
            <view class="num">
                <view>整单折扣(10%)：<text class="num-select">10</text></view>
                <view>报价金额(元)：<text class="num-select">9000</text></view>
            </view>
            <view class="next">保存</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { name: '个', id: 1 },
                { name: '的', id: 2 },
                { name: '好', id: 3 },
                { name: '是', id: 4 },
                { name: '公共', id: 5 }
            ],
            defaultIcon: '/static/img/other/d-icon.png',
            activeIcon: '/static/img/other/a-icon.png',
            selectList: [],
            value: 2
        }
    },
    methods: {
        addOrder() {
            uni.navigateTo({
                url: '/pages/order/addOrder'
            });
        },
        search() { },
        seeMoney() {
            this.$refs.popup.open()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        selectHandle(item) {
            const index = this.selectList.findIndex(selectItem => selectItem.id === item.id);
            if (index !== -1) {
                // 如果找到了，说明包含该项，删除它
                this.selectList.splice(index, 1);
            } else {
                // 如果没有找到，说明不包含该项，添加它
                this.selectList.push(item);
            }
            console.log(this.selectList)
        },
        getIcon(item) {
            return this.selectList.some(selectItem => selectItem.id === item.id) ? this.activeIcon : this.defaultIcon;
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.uni-navbar__header-btns-right {
    width: 64px !important;
}

.selectGoods {
    padding-bottom: 70px;
}

.list {
    padding-bottom: 40rpx;
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
    display: flex;
    flex-direction: column;
    position: relative;

    .title {
        font-size: 36rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-bottom: 20rpx;
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sn {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(103, 117, 133, 1);
        margin-bottom: 28rpx;
    }

    .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 46rpx;

        .money {
            font-size: 40rpx;
            color: rgba(255, 0, 28, 1);
        }
    }

    .total {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(12, 16, 25, 1);
        text-align: right;
    }

    .icon-box {
        position: absolute;
        right: 0;
        top: 0;
    }
}

.customer-info {
    border-radius: 24px;
    background: rgba(77, 172, 177, 1);
    padding: 36rpx 40rpx;
    margin: 32rpx;
    color: rgba(255, 255, 255, 1);
    display: flex;
    justify-content: space-around;

    >view {
        text-align: center;

        .num {
            font-size: 44rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-bottom: 16rpx;
        }

        .name {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
        }
    }
}

.bottom-box {
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .num {
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(12, 16, 25, 1);

        .num-select {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }

    .next {
        padding: 20rpx 60rpx;
        border-radius: 60px;
        background: #4DACB1;
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

}

.minus {
    width: 22px;
    height: 22px;
    border-width: 1px;
    border-color: #E6E6E6;
    border-style: solid;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    @include flex;
    justify-content: center;
    align-items: center;
}

.input {
    padding: 0 10px;
}

.plus {
    width: 22px;
    height: 22px;
    background-color: #FF0000;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
}
</style>